import React from 'react';
import { connect } from 'dva';
import { Table, Row, Col, Form, Input, Select, Button, Switch, Radio, Popconfirm, message } from 'antd';
import Constants  from '../../../utils/Constants';
import ForexPurchaseDetail from "../../../components/capital/ForexPurchaseDetail";
import OperatorConstant from "../../../utils/OperatorConstant";
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const R = require("ramda");

const forexPurchaseApproval = Form.create()(class ForexPurchaseApproval extends React.Component{
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.dispatch({ type: 'forexPurchase/queryList', payload: { page: Constants.DEFAULT_PAGE, status: '2' } });
    }


    onEdit = (record, type, disabled) =>{
        this.props.dispatch({
            type: 'forexPurchase/getById',
            payload: {
                id: record.id
            }
        });
        this.props.dispatch({type: 'capital/getCurrentNodeDetail', payload: {id: record.id, code: "fxPurchase"}});
        this.props.dispatch({type: 'forexPurchase/queryApprovalStatement', payload: {id: record.id, page: Constants.DEFAULT_PAGE} });
        this.forexPurchaseDetail.handleOpen(record.id, type, disabled);
    }


    handleSearch = (flag) => {
        let values = this.props.form.getFieldsValue();
        let newPage = this.props.forexPurchase.page;
        if(flag) newPage.page = 1;
        this.props.dispatch({
            type: 'forexPurchase/queryList',
            payload: {
                ...values,
                page: newPage

            }
        });
    }

    columns = [
        { title: '收款人', dataIndex: 'payeeMan', key: 'payeeMan'},
        { title: '付汇金额', dataIndex: 'fxAmount', key: 'fxAmount'},
        { title: '付款人', dataIndex: 'payMan', key: 'payMan'},
        { title: '付款账号', dataIndex: 'payAccount', key: 'payAccount'},
        { title: '付款金额(CNY)', dataIndex: 'payAmount', key: 'payAmount'},
        { title: '付款时间', dataIndex: 'payTime', key: 'payTime'},
        { title: '申请人', dataIndex: 'creatorName', key: 'creatorName'},
        { title: '申请时间', dataIndex: 'createtime', key: 'createtime'},
        { title: '操作', width: '100px', fixed: 'right',
            render: (record) => {
                let EditLink =  <a href="#" onClick={this.onEdit.bind(this, record, OperatorConstant.approval, true)}>审核</a>
                return (
                    <span>
                    {EditLink}
                </span>
                );
            }
        }];

    render(){
        let formItemLayout = { labelCol: {span: 8}, wrapperCol: {span: 16}};
        let values = this.props.form.getFieldsValue();
        const { getFieldDecorator } = this.props.form;

        let pagination = {
            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.forexPurchase.page.size,
            current: this.props.forexPurchase.page.page,
            total: this.props.forexPurchase.page.totalRow,
            showSizeChanger: true,
            onShowSizeChange: (current, size) => {
                let newPage = this.props.forexPurchase.page;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'forexPurchase/queryList',
                    payload: {
                        ...values,
                        page: newPage
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let newPage = this.props.forexPurchase.page;
                newPage.page = pageNumber;
                this.props.dispatch({
                    type: 'forexPurchase/queryList',
                    payload: {
                        ...values,
                        page: newPage
                    }
                });
            }
        }

        return (
            <div>
                <Row>
                    <Col span={6}><FormItem {...formItemLayout} label={'收款人名称'}>{getFieldDecorator('payeeman')(<Input />)}</FormItem></Col>
                    <Col span={6}><FormItem {...formItemLayout} label={'收款账号'}>{getFieldDecorator('payeeaccount')(<Input />)}</FormItem></Col>
                </Row>
                <Row>
                    <Col span={7}>
                        <FormItem {...formItemLayout} label={'状态'}>
                            {getFieldDecorator('status', {
                                initialValue: "2"
                            })(
                                <RadioGroup style={{ width: 800 }}>
                                    <Radio value="2">待审核</Radio>
                                </RadioGroup>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={7} style={{ float: 'right' }}>
                        <Button type="primary" icon="search" style={{ marginRight: 5 }} onClick={this.handleSearch.bind(this,true)} size={'default'}>查询</Button>
                    </Col>
                </Row>
                <Table rowKey={record => record.id} dataSource={this.props.forexPurchase.list} loading={this.props.loading} columns={this.columns} bordered={true} size={'middle'} scroll={{ x: true }} pagination={pagination} />

                <ForexPurchaseDetail wrappedComponentRef={(inst) => this.forexPurchaseDetail = inst}
                                     dispatch={this.props.dispatch} refreshList={this.handleSearch}/>
            </div>
        );
    }
})


function mapStateToProps(state){
    return{
        loading: state.loading.models.forexPurchase, forexPurchase: state.forexPurchase
    };
}

export default connect(mapStateToProps)(forexPurchaseApproval);
